<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Copyright" content>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="lib/css/mui.min.css">
    <link rel="stylesheet" href="css/commen.css">
    <link rel="stylesheet" href="lib/css/mui.picker.min.css">
    <link rel="stylesheet" href="lib/css/mui.poppicker.css">
    <title>馆长首页</title>


    <script>!(function(){var b=document.documentElement,a=function(){var a=b.getBoundingClientRect().width;b.style.fontSize=(100/640)*(a>=640?640:a)+"px";},c=null;window.addEventListener("resize",function(){clearTimeout(c);c=setTimeout(a,300);});a();})();</script>
</head>
<body>
<!--分馆人员管理-->
<div class="header">
    <div class="need-deal">
        <span>待处理</span>
        <i class="bar"></i>
    </div>
    <div class="alreay-deal">
        <span>已处理</span>
        <i class="bar-1"></i>
    </div>
</div>
<!--筛选条件-->
    <div class="choose-list">
        <div class="date">
            <span>日期</span>
            <img src="img/down.png" alt="">
        </div>
        <div class="position">
            <span>职位</span>
            <img src="img/down.png" alt="">
        </div>
        <div class="shop-list">
            <span>分馆</span>
            <img src="img/down.png" alt="">
        </div>
    </div>
<!--搜索条件-->
<div class="search" style="display:none">
    <div class="more-search">
        <img src="img/more-choose.png" alt="">
        <span>多选</span>
    </div>
    <div class="search-input">
        <input type="text" placeholder="请输入姓名或职务">
        <i></i>
        <img src="img/search.png" alt="">
    </div>
</div>
<!--多选-->
<div class="more-choose" style="display:none">
    <div class="choose-btn">
        <span class="circle"><i></i></span>
        <span>多选</span>
    </div>
    <div class="choose-defalt">
        <span>取消多选</span>
    </div>
</div>
<!--已处理-->
<div class="deal">
    <div class="deal-input">
        <input type="text" placeholder="请输入姓名或职务">
        <i></i>
        <img src="img/search.png" alt="">
    </div>
</div>
<!--人事列表-->
<ul class="peple-list">
    <li>
        <div><span>姓名</span></div>
        <div><span>分馆</span></div>
        <div><span>职位</span></div>
        <div><span>申请日期</span></div>
        <div><span>申请人</span></div>
    </li>
    
    <li class="li-active">
        <div><span class="circle"><i></i></span><span>张三</span></div>
        <div><span>天山国文馆</span></div>
        <div><span>国文老师</span></div>
        <div><span>2017/8/26</span></div>
        <div><span>张上耿</span></div>
    </li>
    
    <li class="li-active">
        <div><span class="circle"><i></i></span><span>张三</span></div>
        <div><span>天山国文馆</span></div>
        <div><span>国文老师</span></div>
        <div><span>2017/8/26</span></div>
        <div><span>张上耿</span></div>
    </li>
    <li class="li-active">
        <div><span class="circle"><i></i></span><span>张三</span></div>
        <div><span>天山国文馆</span></div>
        <div><span>国文老师</span></div>
        <div><span>2017/8/26</span></div>
        <div><span>张上耿</span></div>
    </li>
    <li class="li-active">
        <div><span class="circle"><i></i></span><span>张三</span></div>
        <div><span>天山国文馆</span></div>
        <div><span>国文老师</span></div>
        <div><span>2017/8/26</span></div>
        <div><span>张上耿</span></div>
    </li>
    <li class="li-active">
        <div><span class="circle"><i></i></span><span>张三</span></div>
        <div><span>天山国文馆</span></div>
        <div><span>国文老师</span></div>
        <div><span>2017/8/26</span></div>
        <div><span>张上耿</span></div>
    </li>
</ul>




<script src="lib/js/mui.min.js"></script>
<script src="lib/js/mui.picker.min.js"></script>
<script src="lib/js/mui.poppicker.js"></script>
<script src="lib/js/zepto.min.js"></script>
<script>
    mui.init();
    $(".date").click(function () {
        var dtpicker = new mui.DtPicker({
            type: "date",//设置日历初始视图模式
            beginDate: new Date(2005, 01, 21),//设置开始日期
            endDate: new Date(2017, 12, 25),//设置结束日期
            labels: ['年', '月', '日'],//设置默认标签区域提示语
            customData: {
//                h: [
//                    { value: 'AM', text: 'AM' },
//                    { value: 'PM', text: 'PM' }
//                ]
            }//时间/日期别名
        })
        dtpicker.show(function(e) {
            console.log(e);
        })
    })
    $(".position").click(function () {
        var picker = new mui.PopPicker();
        picker.setData([{value:'zz',text:'智子'}]);
        picker.show(function (selectItems) {
            console.log(selectItems[0].text);//智子
            console.log(selectItems[0].value);//zz
        })
    })

    $(".shop-list").click(function () {
        var picker = new mui.PopPicker();
        picker.setData([{value:'zz',text:'智子'}]);
        picker.show(function (selectItems) {
            console.log(selectItems[0].text);//智子
            console.log(selectItems[0].value);//zz
        })
    })

</script>
<script src="js/page-jump.js"></script>
<script src="js/app.js"></script>
<script src="js/jiekou.js"></script>
</body>
</html>